<div>
<div class="content__title">
    <h1>
        {{l("Tenants")}}
        <small>{{l("TenantsHeaderInfo")}}</small>
    </h1>

    <div class="mb-md text-right">
        <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="createTenant()">
            <i class="anticon anticon-plus"></i>
            <span>{{l("CreateNewTenant")}}</span>
        </button>

    </div>
</div>

<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>

            <form nz-form (ngSubmit)="load()">
                <div nz-form-item nz-row [nzGutter]="24">
                    <div nz-form-item nz-col [nzSpan]="12" class="mb-md">
                        <div nz-form-label>
                            <label for="filterText">{{l('TenantNameOrTenancyCode')}}</label>
                        </div>
                        <div nz-form-control>
                            <nz-input [(ngModel)]="filters.filterText" name="filterText" [nzSize]="'large'" [nzPlaceHolder]="l('SearchWithThreeDot')"></nz-input>
                        </div>
                    </div>

                    <div nz-form-item nz-col [nzSpan]="12" class="mb-md">
                        <div nz-form-label>
                            <label for="no">{{l('Edition')}}</label>
                        </div>
                        <div nz-form-control>
                            <edition-combo [(selectedEdition)]="filters.selectedEditionId"></edition-combo>
                        </div>
                    </div>

                    <div nz-form-item nz-col [nzSpan]="12" class="mb-md">
                        <div nz-form-label>
                            <label name="subscriptionEndDateRangeActive" nz-checkbox [(ngModel)]="filters.subscriptionEndDateRangeActive">
                                <span>{{l('SubscriptionEndDate')}}</span>
                            </label>
                        </div>
                        <div nz-form-control class="flex-1">
                            <nz-datepicker name="subscriptionEndDateStart" [(ngModel)]="filters.subscriptionEndDateStart" [nzDisabled]="!filters.subscriptionEndDateRangeActive"
                                [nzPlaceHolder]="'Select date'"></nz-datepicker>
                            --
                            <nz-datepicker name="subscriptionEndDateEnd" [(ngModel)]="filters.subscriptionEndDateEnd" [nzDisabled]="!filters.subscriptionEndDateRangeActive"
                                [nzPlaceHolder]="'Select date'"></nz-datepicker>

                        </div>
                    </div>
                    <div nz-form-item nz-col [nzSpan]="12" class="mb-md">
                        <div nz-form-label>
                            <label name="creationDateRangeActive" nz-checkbox [(ngModel)]="filters.creationDateRangeActive">
                                <span>{{l('CreationTime')}}</span>
                            </label>
                        </div>
                        <div nz-form-control class="flex-1">
                            <nz-datepicker name="creationDateStart" [(ngModel)]="filters.creationDateStart" [nzDisabled]="!filters.creationDateRangeActive"
                                [nzPlaceHolder]="'Select date'"></nz-datepicker>
                            --
                            <nz-datepicker name="creationDateEnd" [(ngModel)]="filters.creationDateEnd" [nzDisabled]="!filters.creationDateRangeActive"
                                [nzPlaceHolder]="'Select date'"></nz-datepicker>

                            <!--
                                            <nz-rangepicker [(ngModel)]="filters.creationDateRange"></nz-rangepicker>
                                            -->
                        </div>
                    </div>

                    <div nz-form-item nz-col [nzSpan]="24" class="mb-md">
                        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">
                            <i class="anticon anticon-search"></i>查询
                        </button>
                    </div>

                </div>

            </form>

            <nz-table #nzTable [nzAjaxData]="list" [nzShowSizeChanger]="true" [nzLoading]="loading" [nzTotal]="total" [(nzPageIndex)]="pageIndex"
                (nzPageIndexChange)="load()" [(nzPageSize)]="pageSize" (nzPageSizeChange)="load()">
                <thead nz-thead>
                    <tr>
                        <th nz-th>
                            <span>操作</span>
                        </th>
                        <th nz-th>
                            <span>租户编码</span>
                        </th>
                        <th nz-th>
                            <span>名字</span>
                        </th>
                        <th nz-th>
                            <span>版本</span>
                        </th>
                        <th nz-th>
                            <span>到期日</span>
                        </th>
                        <th nz-th>
                            <span>激活</span>
                        </th>
                        <th nz-th>
                            <span>创建时间</span>
                        </th>

                    </tr>
                </thead>
                <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                        <td nz-td>

                            <nz-dropdown>
                                <a class="ant-dropdown-link" nz-dropdown>
                                    <i class="anticon anticon-setting"></i>
                                    操作
                                    <i class="anticon anticon-down"></i>
                                </a>
                                <ul nz-menu>
                                    <li nz-menu-item (click)="editedTenant(data.id)">修改</li>
                                    <li nz-menu-item (click)="deleteTenant(data)">
                                        删除
                                    </li>

                                </ul>
                            </nz-dropdown>
                        </td>

                        <td nz-td>
                            <span>
                                {{data.tenancyName}}
                            </span>

                        </td>
                        <td nz-td>
                            <span>
                                {{data.name}}
                            </span>

                        </td>
                        <td nz-td>
                            <span>
                                {{data.editionDisplayName}}
                            </span>

                        </td>
                        <td nz-td>
                            <span>
                                    {{ data.subscriptionEndDateUtc ? (data.subscriptionEndDateUtc | momentFormat:'LL') : '-'}}

                            </span>

                        </td>
                        <td nz-td>

                            <nz-badge [nzStatus]="data.isActive?'success':'error'" [nzText]="data.isActive?'是':'否'"></nz-badge>

                        </td>
                        <td nz-td>{{data.creationTime | momentFormat:'L' }}</td>

                    </tr>
                </tbody>
            </nz-table>
        </nz-card>
    </div>

</div>
</div>
